*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
@keyframes diyi {
    from{transform: scale(1) }
    to{transform: scale(0) }
}

#diyige{
    position: fixed;
    left: 50%;
    top: 50%;

}
.dy{
    height: 50px;
    width: 50px;
    border-radius: 50%;
    background-color: aqua;
    animation-name:diyi ;
    animation-duration:1.5s ;
    display: inline-block;
    animation-iteration-count:infinite;
    animation-direction:alternate;

}
.dy1{
    animation-delay:0.5s

}
.dy2{
    animation-delay:0.7s

}
#dierge{
    position: fixed;
    left: 50%;
    top: 80%;
}
.cfx{
    height: 50px;
    width: 10px;
    background-color: aqua;
    display: inline-block;
    animation-name:cfx ;
    animation-duration:0.4s ;
    animation-iteration-count:infinite;
    animation-direction:alternate;

}
@keyframes cfx {
    from{transform: scaleY(1) }
    to{transform: scaleY(0) }
}
.c1{
    animation-delay:0.08s
}
.c2{
    animation-delay:0.16s
}
.c3{
    animation-delay:0.24s
}
.c4{
    animation-delay:0.32s
}
.c5{
    animation-delay:0.4s
}
.c6{
    animation-delay:0.48s
}
.c7{
    animation-delay:0.56s
}
.c8{
    animation-delay:0.74s
}
.c9{
    animation-delay:0.82s
}
